<template>
  <div class="flowPartyMember">
  	<x-header :left-options="{backText: ''}">流动党员</x-header>		
  	<div class="flowPartyMemberForm">
  		<div class="flowPartyMemberForm-title">
  			<div class="flowPartyMemberForm-titleText">
  				<div class="flowPartyMemberForm-info">姓名</div>
  				<div class="flowPartyMemberForm-info">流出地</div>
  				<div class="flowPartyMemberForm-info">流出时间</div>
  				<div class="clear"></div>
  			</div>
  			<ul class="nameMenu">
  				<li class="nameMenuList" v-for="nameMenuList in flowPartyMemberForm">
  					<div class="flowPartyMemberForm-InfoText">
		  				<div class="flowPartyMemberForm-info" v-text="nameMenuList.Name"></div>
		  				<div class="flowPartyMemberForm-info" v-text="nameMenuList.LCD"></div>
		  				<div class="flowPartyMemberForm-info" v-text="nameMenuList.LCSJ.substr(0,10)"></div>
		  				<div class="clear"></div>
		  			</div>
		  			<div class="touchId" :data-id="nameMenuList.ID" @click="flowPartyMemberDetail"></div>
  				</li>
  				<li v-text="loadMoreText" class="loadMoreText" @click="loadMore" v-if="flowPartyMemberFormLength > 8"></li>
  			</ul>
  		</div>
  	</div>
		
	</div>
</template>

<script>
import init from '../assets/js/init';
import { XHeader, Actionsheet, TransferDom } from 'vux'
import Api from '../assets/js/api';

var api = new Api();
var result = localStorage.getItem("result");
export default {
  name: 'flowPartyMember',
  data () {
    return {
    	flowPartyMemberForm:[],//接收流动党员列表数据
    	flowPartyMemberFormPage:1,//初始默认flowPartyMemberForm为加载第一页，往后每点击一次加载更多则增加一页
    	flowPartyMemberFormLength:'',//流动党员的所有数据长度
    	loadMoreText:'点击加载更多',
    }
  },
  created(){
  	var self = this;
		api.post(api.url.flowPartyMember, {
			Action: 'DYGL_GETDYLDLISTBYAPP',
			p: 1,
			pagecount: 8,
			szhlcode: result
		}).then((response) => {
			console.log(response);
			self.flowPartyMemberForm = response.data.Result;
			self.flowPartyMemberFormLength = response.data.Result1;
		}).catch((error) => {
			console.log(error);
		});
  },
  methods:{
		loadMore(){
			this.flowPartyMemberFormPage += 1;
			var self = this;
			this.loadMoreText = '正在加载中···';
			api.get(api.url.flowPartyMember,{ 
				params:{
					Action: 'DYGL_GETDYLDLISTBYAPP',
					p: self.flowPartyMemberFormPage,
					pagecount: (self.flowPartyMemberFormLength - self.flowPartyMemberFormPage * 8) > 0 ? 8 : 8 - Math.abs(self.flowPartyMemberFormLength - self.flowPartyMemberFormPage * 8),
					szhlcode: result
				}
			}).then(response=>{ 
				self.flowPartyMemberForm = self.flowPartyMemberForm.concat(response.data.Result);
				self.loadMoreText = '点击加载更多';
				if(response.status == 200){
					this.status = 1;
				}
			}).catch(err=>{ 
				console.log(err);
				this.loadMoreText = '点击加载更多';
			});
			if(this.flowPartyMemberForm.length == this.flowPartyMemberFormLength){
				this.loadMoreText = '信息已经更新为最新的了！';
			}
		},
		flowPartyMemberDetail(event){
			localStorage.removeItem("flowPartyMemberID");
			var dataId = event.target.getAttribute('data-id');
			localStorage.setItem("flowPartyMemberID",dataId);
			this.$router.push('/flowPartyMemberInfo');
		},
  },
  components:{
  	XHeader,
    Actionsheet,
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
	@import url("../assets/css/common.css");
	.flowPartyMember{
		height: 100%;
	}
	.vux-header{
		background-color: #f00 !important;
		position: fixed !important;
		top: 0;
		left: 0;
		z-index: 2000;
		width: 100%;
	}
	
	.vux-header .vux-header-left .left-arrow:before{
		border: 2px solid #fff !important;
    border-width: 2px 0 0 2px !important;
	}
	.flowPartyMemberForm{
		width: 100%;
		padding-top: 46px;
		padding-bottom: 1rem;
		background-color: #fff;
		box-sizing: border-box;
	}
	.flowPartyMemberForm-title{
		width: 100%;
		box-sizing: border-box;
		padding: 0 0.75rem;
	}
	.flowPartyMemberForm-titleText{
		width: 100%;
		line-height: 2rem;
		border-bottom: 1px solid #e9e9e9;
		font-size: 0.7rem;
		color: #333;
	}
	.flowPartyMemberForm-InfoText{
		width: 100%;
		line-height: 1.5rem;
		border-bottom: 1px solid #e9e9e9;
		font-size: 0.6rem;
		color: #333;
	}
	.flowPartyMemberForm-info{
		width: 33.33%;
		text-align: center;
		float: left;
		white-space:nowrap; 
		overflow:hidden; 
		text-overflow:ellipsis;
	}
	.nameMenu{
		width: 100%;
		display: block;
		overflow: hidden;
	}
	.nameMenuList{
		width: 100%;
		position: relative;
	}
	.nameMenuList .touchId{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.loadMoreText{
		width: 100%;
		text-align: center;
		line-height: 1.5rem;
		color: #333;
		font-size: 0.65rem;
	}
</style>
